import {PlusOutlined, UploadOutlined} from '@ant-design/icons';
import {Button, message, Drawer, FormInstance, Popconfirm, Image, Upload} from 'antd';
import React, {useState, useRef} from 'react';
import {PageContainer, FooterToolbar} from '@ant-design/pro-layout';
import type {ProColumns, ActionType} from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import {
  ModalForm,
  ProFormText,
  ProFormSelect,
  ProFormUploadButton,
  ProFormDatePicker,
} from '@ant-design/pro-form';
import ProDescriptions, {ProDescriptionsItemProps} from '@ant-design/pro-descriptions';
import {removeData, dataList, addData, updateData, loadData} from './service';
import type {EquipmentBody, EquipmentListItem, EquipmentListPagination} from './data';
import {UploadFile} from 'antd/lib/upload/interface';
import {loadEmployeeSelect} from '@/pages/Employee/List/service';
import CheckModule from '@/components/CheckModule';

/**
 * 添加节点
 *
 * @param fields
 * @param mode
 */

const handleAdd = async (fields: EquipmentBody, mode: boolean) => {
  const hide = message.loading(mode ? '正在保存' : '正在添加');

  try {
    mode ? await updateData({...fields}) : await addData({...fields});
    hide();
    message.success(mode ? '保存成功' : '添加成功');
    return true;
  } catch (error) {
    // hide();
    // message.error(mode ? '保存失败请重试' : '添加失败请重试');
    return false;
  }
};
/**
 * 删除节点
 *
 * @param selectedRows
 */

const handleRemove = async (selectedRows: EquipmentListItem[]) => {
  const hide = message.loading('正在删除');
  if (!selectedRows) return true;

  try {
    await removeData(selectedRows.map((row) => row.equipmentId));
    hide();
    message.success('删除成功，即将刷新');
    return true;
  } catch (error) {
    hide();
    message.error('删除失败，请重试');
    return false;
  }
};
const requestEmployee = async (param: any) => {
  return loadEmployeeSelect(param).then(({data}) => {
    return data;
  });
};

type EquipmentProps = {
  type: string;
};
const EquipmentPage: React.FC<EquipmentProps> = (props) => {
  const {type} = props;

  const [createModalVisible, handleModalVisible] = useState<boolean>(false);
  const [showDetail, setShowDetail] = useState<boolean>(false);
  const actionRef = useRef<ActionType>();
  const formRef = useRef<FormInstance>();
  const [currentRow, setCurrentRow] = useState<EquipmentListItem>();
  const [selectedRowsState, setSelectedRows] = useState<EquipmentListItem[]>([]);

  const columns: ProColumns<EquipmentListItem>[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'indexBorder',
      render: (dom, entity, index) => {
        return (
          <span>
            {index +
              1 +
              ((actionRef?.current?.pageInfo?.current || 1) - 1) *
              (actionRef?.current?.pageInfo?.pageSize || 5)}
          </span>
        );
      },
    },
    {
      title: '设备名',
      dataIndex: 'name',
    },
    {
      title: '编号',
      dataIndex: 'number',
    },

    {
      search: false,
      title: '操作规程附件',
      dataIndex: 'vehicleLicence',
      render: (_, record) =>
        record.enclosure ? (
          <a target={'_blank'} href={record.enclosure}>
            查看
          </a>
        ) : (
          <>-</>
        ),
    },
    {
      title: '负责人',
      dataIndex: 'employeeId',
      valueType: 'select',
      request: async () => {
        let result = await loadEmployeeSelect({});
        return result.data;
      },
    },
    {
      title: '负责人电话',
      search: false,
      dataIndex: 'employeePhone',
    },
    {
      title: '创建时间',
      sorter: true,
      dataIndex: 'createTime',
      valueType: 'dateTime',
      search: false,
      defaultSortOrder: 'descend',
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      hideInDescriptions: true,
      render: (_, record) => [
        <a
          key="view"
          onClick={() => {
            setCurrentRow(record);
            setShowDetail(true);
          }}
        >
          查看
        </a>,
        <a
          key="edit"
          onClick={() => {
            formRef.current?.resetFields();
            console.log(record);
            setCurrentRow(record);
            setEditMode(true);
            handleModalVisible(true);
          }}
        >
          编辑
        </a>,

        <Popconfirm
          key="delete"
          okButtonProps={{danger: true}}
          title={`确认删除设备：${record.name}?`}
          onConfirm={async () => {
            setCurrentRow(record);
            await handleRemove([record]);
            actionRef.current?.reloadAndRest?.();
          }}
          okText="删除"
          cancelText="取消"
        >
          <a href="#"> 删除 </a>
        </Popconfirm>,
      ],
    },
  ];

  const [editMode, setEditMode] = useState<boolean>(false);
  const [previewData, setPreviewData] = useState({
    visible: false,
    image: '',
    title: '',
  });

  const uploadProps = {
    headers: {
      Authorization: `Bearer ${localStorage.getItem('token')}`,
    },
    accept: '.pdf',
    multiple: false,
    // @ts-ignore
    onChange({file}) {
      if (file.status === 'done' && file.response.code !== 200) {
        file.status = 'error';
      }
    },
    onPreview: async (file: UploadFile) => {
      window.open(file?.response?.data?.url || file.url, '_blank');
    },
    name: 'file',
    max: 1,
  };
  const submitCheckFile = (values: EquipmentBody, fileName: string, dataName: string) => {
    if (values[fileName]) {
      let file = values[fileName][0];
      values[dataName] = file?.response?.data?.url || file.url;
    }
  };

  const [uploading, setUploading] = useState(false);
  const uploadProps1 = {
    headers: {
      Authorization: `Bearer ${localStorage.getItem('token')}`,
      TenantCode: 'e513f45c099239505054fead0a445fa2'
    },
    multiple: false,
    // onPreview: async (file: UploadFile) => {
    //   window.open(file?.response?.data?.path || file.url, '_blank')
    // },
    name: 'file',
    max: 1,
  };

  return (
    <CheckModule code={'SS'}>
      <PageContainer waterMarkProps={{content: ''}}>
        <ProTable<EquipmentListItem, EquipmentListPagination>
          headerTitle="设备列表"
          actionRef={actionRef}
          rowKey="equipmentId"
          search={{
            labelWidth: 120,
          }}
          toolBarRender={() => [
            //  <Button
            //   type="link"
            //   key="template"
            //   onClick={async () => {
            //     location.href = "https://cdn.51zasafe.com/zun/template/%E4%BD%9C%E4%B8%9A%E6%B4%BB%E5%8A%A8%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx"
            //   }}
            // >
            //   下载模板
            // </Button>,
            // <Upload
            //   key="upload"
            //   {...uploadProps1}
            //   accept={'.xls,.xlsx'}
            //   action={'/v2/enterprise/equipment/import'}
            //   showUploadList={false}
            //   onChange={async (data) => {
            //     let file = data.file;
            //     if (file.status === 'uploading') {
            //       setUploading(true);
            //     } else {
            //       setUploading(false);
            //     }
            //     if (file.status === 'done' && file.response.code !== 200) {
            //       message.error(file.response.msg);
            //       file.status = 'error';
            //     } else if (file.status === 'done' && file.response.code === 200) {
            //       message.success('上传成功');
            //       // @ts-ignore
            //       actionRef?.current?.reloadAndRest();
            //     }
            //   }}
            // >
            //   <Button type="primary" loading={uploading} icon={<UploadOutlined/>}>
            //     导入
            //   </Button>
            // </Upload>,
            <Button
              type="primary"
              key="primary"
              onClick={() => {
                setEditMode(false);
                handleModalVisible(true);
              }}
            >
              <PlusOutlined/> 新建
            </Button>,
          ]}
          request={dataList}
          columns={columns}
          rowSelection={{
            onChange: (_, selectedRows) => {
              setSelectedRows(selectedRows);
            },
          }}
          // @ts-ignore
          params={{type: type}}
        />
        {selectedRowsState?.length > 0 && (
          <FooterToolbar
            extra={
              <div>
                已选择{' '}
                <a
                  style={{
                    fontWeight: 600,
                  }}
                >
                  {selectedRowsState.length}
                </a>{' '}
                个设备
              </div>
            }
          >
            <Popconfirm
              key="delete"
              title={`确认删除选中的${selectedRowsState.length}个设备?`}
              okButtonProps={{danger: true}}
              onConfirm={async () => {
                await handleRemove(selectedRowsState);
                setSelectedRows([]);
                actionRef.current?.reloadAndRest?.();
              }}
              okText="删除"
              cancelText="取消"
            >
              <Button danger>批量删除</Button>
            </Popconfirm>
            {/*<Button type="primary">批量审批</Button>*/}
          </FooterToolbar>
        )}
        <ModalForm<EquipmentBody>
          title={currentRow?.equipmentId || 0 > 0 ? '编辑设备' : '新建设备'}
          formRef={formRef}
          modalProps={{destroyOnClose: true, maskClosable: false}}
          visible={createModalVisible}
          onVisibleChange={(visible) => {
            if (!visible) {
              setCurrentRow(undefined);
            }
            handleModalVisible(visible);
          }}
          onFinish={async (value) => {
            console.log(value);
            try {
              submitCheckFile(value, 'enclosureFile', 'enclosure');
            } catch ({message: msg}) {
              // @ts-ignore
              message.error(msg);
            }
            const success = await handleAdd(value, editMode);
            if (success) {
              handleModalVisible(false);
              if (actionRef.current) {
                actionRef.current?.reload();
              }
            }
          }}
          request={(params: EquipmentBody) => {
            console.log(params);
            if (params.equipmentId ?? 0 > 0) {
              return loadData(params).then(({data}) => {
                if (data.enclosure)
                  data.enclosureFile = [
                    {
                      url: data.enclosure,
                      name: '证书图片',
                      status: 'done',
                    },
                  ];
                return data;
              });
            } else {
              return new Promise<EquipmentBody>((resolve) => {
                resolve({
                  equipmentId: 0,
                  type: type,
                });
              });
            }
          }}
          params={{...currentRow}}
        >
          <ProFormText hidden name="equipmentId"/>
          <ProFormText hidden name="employeeName"/>
          <ProFormText hidden name="type"/>
          <ProFormText required label={'名称'} name="name"/>
          <ProFormText required label={'编号'} name="number"/>

          <ProFormUploadButton
            name="enclosureFile"
            label="操作规程附件"
            max={1}
            // @ts-ignore
            fieldProps={{...uploadProps}}
            action="/v2/enterprise/upload/vehicle-enclosure"
          />
          <ProFormSelect
            name="employeeId"
            required
            label={'负责人'}
            request={requestEmployee}
            fieldProps={{
              placeholder: '请选择负责人',
              showSearch: true,
              dropdownMatchSelectWidth: false,
              onChange: (a, b) => {
                debugger;
                formRef.current?.setFieldsValue({employeePhone: b['addition']});
                formRef.current?.setFieldsValue({employeeName: b['name']});
              },
            }}
          />

          <ProFormText label={'负责人电话'} name="employeePhone"/>
          <ProFormText label={'设备型号'} name="machineType"/>
          <ProFormText label={'证书编号'} name="certificateNo"/>
          <ProFormDatePicker name="certificateStartTime" label="有效期"/>
          <ProFormDatePicker name="certificateEndTime" label="失效期"/>
          <ProFormDatePicker name="firstCertificateTime" label="首次获得证书时间"/>
          <ProFormText label={'载客/吨位'} name="carryingCapacity"/>
          <ProFormText label={'办证机构'} name="certificateOrg"/>
          <ProFormText label={'技术等级'} name="skillLevel"/>
          <ProFormDatePicker name="lastMaintainTime" label="上次维护日期"/>
          <ProFormDatePicker name="nextMaintainTime" label="下次维护日期"/>
          <ProFormText label={'备注'} name="remark"/>
        </ModalForm>

        <Image
          width={200}
          style={{display: 'none'}}
          src={previewData.image}
          preview={{
            visible: previewData.visible,
            src: previewData.image,
            onVisibleChange: (value) => {
              setPreviewData({image: previewData.image, title: '', visible: value});
            },
          }}
        />
        <Drawer
          width={800}
          visible={showDetail}
          onClose={() => {
            setCurrentRow(undefined);
            setShowDetail(false);
          }}
          closable={false}
        >
          {currentRow?.equipmentId && (
            <ProDescriptions<EquipmentBody>
              column={1}
              bordered={true}
              title="设备详情"
              request={loadData}
              params={currentRow}
              columns={columns as ProDescriptionsItemProps<EquipmentBody>[]}
            />
          )}
        </Drawer>
      </PageContainer>
    </CheckModule>
  );
};

export default EquipmentPage;
